<!DOCTYPE html>
<html>
<head>
    <title>Auth Test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Authentication Test</h1>
        <div>
            <h2>Local Storage:</h2>
            <p>Token: {{ token }}</p>
            <button @click="clearToken">Clear Token</button>
        </div>
        <div>
            <h2>Auth Config:</h2>
            <p>Auth Required: {{ authConfig.auth_required }}</p>
            <p>Allow Register: {{ authConfig.allow_register }}</p>
            <button @click="loadConfig">Reload Config</button>
        </div>
        <div>
            <h2>Test Login:</h2>
            <input v-model="username" placeholder="Username">
            <input v-model="password" type="password" placeholder="Password">
            <button @click="testLogin">Test Login</button>
            <p v-if="loginResult">{{ loginResult }}</p>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        
        createApp({
            setup() {
                const token = ref(localStorage.getItem('authToken'));
                const authConfig = ref({ auth_required: true, allow_register: false });
                const username = ref('');
                const password = ref('');
                const loginResult = ref('');
                
                const clearToken = () => {
                    localStorage.removeItem('authToken');
                    token.value = null;
                };
                
                const loadConfig = async () => {
                    try {
                        const response = await axios.get('http://127.0.0.1:8001/v1/auth/config');
                        authConfig.value = response.data;
                    } catch (error) {
                        console.error('Failed to load auth config:', error);
                    }
                };
                
                const testLogin = async () => {
                    try {
                        const response = await axios.post('http://127.0.0.1:8001/v1/auth/login', {
                            username: username.value,
                            password: password.value
                        });
                        localStorage.setItem('authToken', response.data.token);
                        token.value = response.data.token;
                        loginResult.value = 'Login successful!';
                    } catch (error) {
                        console.error('Login failed:', error);
                        loginResult.value = 'Login failed: ' + (error.response?.data?.detail || error.message);
                    }
                };
                
                onMounted(() => {
                    loadConfig();
                });
                
                return {
                    token,
                    authConfig,
                    username,
                    password,
                    loginResult,
                    clearToken,
                    loadConfig,
                    testLogin
                };
            }
        }).mount('#app');
    </script>
</body>
</html>